<template>
    <div>
        <el-drawer
        title="用户编辑"
        :visible.sync="openDrawer"
        direction="rtl"
        :before-close="handleClose">
        <div v-if="UserInfo !=''" >
            <el-card :body-style="{ padding: '0px' }">
                
                <el-upload
                    class="avatar-uploader"
                    :action="'/v1/user/upload?id='+UserInfo.id"
                    :show-file-list="false"
                    accept=".png,.jpg" 
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <el-avatar :src="UserInfo.Uimages"></el-avatar>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-form ref="form" :model="UserInfo" label-width="70px" style="padding: 10px;">
                    <el-form-item label="用户ID">
                        <span>{{UserInfo.id}}</span>
                    </el-form-item>
                    <el-form-item label="用户名">
                        <el-input v-model="UserInfo.username" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="UserInfo.Nickname" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="UserInfo.Email" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="UserInfo.phone" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="UserInfo.password" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="用户状态">
                        <el-radio-group v-model="UserInfo.Status">
                            <el-radio :label="1">禁用</el-radio>
                            <el-radio :label="0">启用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-button @click="UserSave"  plain>保存</el-button>
        </div>
        <el-empty description="无数据" v-else></el-empty>
        </el-drawer>   
        <el-table :data="UserList" height="750" max-height="750" :row-class-name="tableRowClassName">

            <el-table-column prop="id" label="用户id" width="100"></el-table-column>
            <el-table-column prop="Nickname" label="姓名" width="120" fixed></el-table-column>
            <el-table-column prop="username" label="用户名" width="150"></el-table-column>
            <el-table-column prop="Email" label="邮箱" width="150"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column prop="Group" label="所属组" width="100"></el-table-column>
            <el-table-column label="用户状态" >
                <template slot-scope="scope" >
                    <div v-if="scope.row.Status == 1 ">禁用</div>
                    <div v-else>正常</div>
                </template>
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="120">
                <template slot-scope="scope">
                    <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    icon="el-icon-edit"
                    size="small" circle>编辑</el-button>
                </template>
            </el-table-column>
            <el-empty description="无数据" v-if="UserList.length < 1"></el-empty>
        </el-table>

        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Page"
        :page-sizes="[10,20,50,100, 200, 300, 400,500,800,1000,2000,5000,10000]"
        :page-size="Size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Toatls">
        </el-pagination>
    </div>

    
</template>

<script>
import { UserGroups,getUsers,searchUser } from '../../api/api';       
export default {
    name: 'UserSetting',
    data(){
        return { 
            openDrawer:false,
            Page: 1,
            Size: 10,
            UserInfo:"",
            UserList:[],
            UserGroupList:[],
            Toatls:0
        }
    },
    mounted:function () {
        this.getuser();
        this.getuserGroups();
    },//mounted
    methods: {
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file,row) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        UserSave(){
            console.log(this.UserInfo);
        },
        tableRowClassName({row, rowIndex}) {
            if (row.Status == 1) {
              return 'warning-row';
            } 
            return '';
        },
        handleClick(row) {
            var that = this;
            that.UserInfo = row;
            that.openDrawer= true;
        },
        getuser(){
            var that = this;
            let par = {"page":that.Page,"size":that.Size}
            getUsers(par).then(res=>{
                let {code, msg, data} = res;
                if (code == 200){
                    that.UserList = data.list
                    that.Toatls = data.count
                    that.$message("用户列表获取成功");
                }else{
                    that.$message.error("用户列表获取失败")
                }
            }).catch(
                function(error) {
                    // body...
                    that.$message.error(error)
            });
        },getuserGroups(){
            var that = this;
            UserGroups().then(res=>{
                let {code, msg, data} = res;
                if (code == 200){
                    that.UserGroupList = data;
                    that.$message("用户分组信息获取成功");
                }else{
                    that.$message.error("用户分组信息获取失败")
                }
            }).catch(
                function(error) {
                    // body...
                    that.$message.error(error)
            });
        },
        handleSizeChange(val) {
            var that = this;
            that.Size = val;
            that.getuser();
        },
        handleCurrentChange(val) {
            var that = this;
            that.Page = val
            that.getuser();
        },
        handleClose(done) {
            this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});
        },

    }
}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
